<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="outer" v-cloak v-loading="loading">

        <el-tabs tab-position="left">
            <el-tab-pane label="网站信息">
                <el-form v-loading="loading" label-position="right" label-width="90px">

                    <el-form-item label="网站状态">
                        <el-switch v-model="config.www_enable" active-color="#13ce66"
                            inactive-color="#ff4949" active-text="开启" inactive-text="关闭">
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="关站提示" v-if="!config.www_enable">
                        <el-input v-model="config.www_close_msg" style="width: 300px" type="textarea" :rows="5" />
                        <info-tip tipText="网站状态为关闭时，显示的提示信息。"></info-tip>
                    </el-form-item>

                    <el-form-item label="官网logo">
                        <image-picker v-model="config.website_logo" width="160" height="50" :canDelete="false" />
                        <info-tip tipText="最佳图片尺寸 宽度160px，高度50px 或同比例"></info-tip>
                    </el-form-item>

                    <el-form-item label="浏览器图标">
                        <image-picker v-model="config.favicon" width="50" height="50" :canDelete="false" />
                        <info-tip tipText="最佳图片尺寸 宽度50px，高度50px 或同比例"></info-tip>
                    </el-form-item>

                    <el-form-item label="首页横幅">
                        <image-picker v-model="config.www_home_banner" width="640" height="200" :canDelete="false" />
                        <info-tip tipText="最佳图片尺寸 宽度1280px，高度400px 或同比例"></info-tip>
                    </el-form-item>

                    <el-form-item label="ICP备案号">
                        <el-input v-model="config.website_icp" style="width: 300px" />
                    </el-form-item>

                    <el-form-item label="公安备案号">
                        <el-input v-model="config.www_public_security" style="width: 300px" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" :disabled="loading" :loading="loading" size="small"
                            icon="el-icon-check" @click="submitWebConfig">保存设置</el-button>
                    </el-form-item>

                </el-form>
            </el-tab-pane>

            <el-tab-pane label="TDK设置">
                <SeoConfig></SeoConfig>
            </el-tab-pane>

            <el-tab-pane label="栏目设置">
                <el-table :data="www_navs" v-loading="loading" size="mini" >
                    <el-table-column label="页面" prop="name"></el-table-column>
                    <el-table-column label="路径" prop="path"></el-table-column>
                    <el-table-column label="是否启用" width="100">
                        <template slot-scope="scope">
                            <!-- <el-link type="primary" @click="settingHandle(scope.row)">设置</el-link>
                            <el-link type="danger" :disabled="scope.row.is_system"
                                @click="deleteHandle(scope.row)">删除</el-link> -->
                            <el-switch v-model="scope.row.is_public" @change="updateWwwNavs" active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>

    </div>
</template>

<script>
import { updateWebInfo, getWwwNavs, updateWwwNavs } from "@/api/myconfig";
import SeoConfig from "./SeoConfig/index.vue"
export default {
    data() {
        return {
            loading: false,
            config: {
                website_logo: '',
                website_icp: '',
            },
            www_navs: [],
        };
    },
    props: {
    },
    components: {
        SeoConfig,
    },

    mounted: function () {
        this.loadConfig()
        this.loadWwwNavs()
    },

    computed: {
    },

    watch: {
    },

    methods: {

        submitWebConfig() {
            this.loading = true
            if (!this.config.website_icp) {
                this.$message.error("请填写icp信息")
                return
            }
            if (!this.config.website_logo) {
                this.$message.error("请上传网站logo")
                return
            }
            if (!this.config.www_home_banner) {
                this.$message.error("请上传网站首页横幅")
                return
            }
            updateWebInfo(this.config).then(resp => {
                this.loading = false
                if (resp.code != 0) {
                    return
                }
                this.$message.success("保存成功")
            })
        },

        updateWwwNavs() {
            this.loading = true
            updateWwwNavs({
                www_navs_list: this.www_navs
            }).then(resp => {
                this.loading = false
                if (resp.code != 0) {
                    return
                }
                this.$message.success("保存成功")
            })
        },

        loadConfig: function () {
            this.loading = true;
            this.$store.dispatch("myconfig/loadMyconfig").then((config) => {
                this.loading = false;
                this.config = config;
            });
        },

        loadWwwNavs() {
            this.loading = true
            getWwwNavs().then(resp => {
                this.loading = false
                if (resp.code != 0) {
                    return
                }
                this.www_navs = resp.data
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    border-bottom: 0.2px solid #ebeef5;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .block {
        margin-right: 10px;
    }
}
</style>